<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08- 自定义指令</title>
    <script src="../js/vue.min.js"></script>
    <script src="../js/axios.min.js"></script>
</head>
<body>
<div id="app">
    <h3 v-hello>{{msg}}</h3>
    <button @click="change">修改数据</button>

    <p v-world>v world</p>


    <p v-wbs> v-wbs asdfasdfasdfbhasdfbsda</p>

    <hr>
    <h2>局部指令</h2>
    <input type="text" v-model="msg" v-focusaaaaa>
</div>
<script>

    // 全局指令
    // 注：使用指令时必须在指名名称前加前缀v-，即v-指令名称

    // 1
    Vue.directive('hello', {
        bind() { // 常用
            console.log('1 bind 指令第一次绑定到元素上时调用，只调用一次，可执行初始化操作')
        },
        inserted() {
            console.log('2 inserted 被绑定元素插入到DOM中时调用');
        },
        update() {
            console.log('3 update 被绑定元素所在模板更新时调用');
        },
        componentUpdated() {
            console.log('4 componentUpdated 被绑定元素所在模板完成一次更新周期时调用');
        },
        unbind() {
            console.log('5 unbind  指令与元素解绑时调用，只调用一次');
        }
    });

    // 2
    // 钩子函数的参数
    Vue.directive('world', {
        bind(el, binding) {
            console.log(el, '\n 指令所绑定的元素，DOM对象');  //指令所绑定的元素，DOM对象
            el.style.color = 'red';
            console.log(binding , ' ------------ binding --------------------')
        }
    });

    // 3
    // 传入一个简单的函数,bind和update时调用
    Vue.directive("wbs", function () {
        console.log('wbs12341234 传入一个简单的函数,bind和update时调用')
    });

    let vm = new Vue({
        el: "#app",
        data() {
            return {
                msg: 'ton',

            }
        },
        methods: {
            change() {
                this.msg = 'tomcat and apache';
            }
        },
        directives: { //自定义局部指令
            focusaaaaa: {

                inserted(el) {
                    el.focus(); // 当被绑定元素插入到Dom中是获取焦点
                }
            }
        },
    });


</script>
</body>
</html>